@import "./_variables";

$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: false !default;
$prefix-for-opera: false !default;
$prefix-for-spec: true !default; // required for keyframe mixin

@function px2rem($px) {
    $rem: 50px;
    @return ($px/2/$rem) + rem;
}

@mixin radiusImg($rectWidth: 50px, $left: 0, $top: 0) {
    width: $rectWidth;
    height: $rectWidth;
    border-radius: 50%;
    position: absolute;
    left: $left;
    top: $top;
}

@mixin button($height: px2rem(86px), $width: px2rem(518px), $block:block, $color: #ffffff, $backgroundColor: $blue, $padding: 0) {
    display: $block;
    height: $height;
    width: $width;
    padding: $padding;
    background: $backgroundColor;
    border-radius: 4px;
    border: none;
    line-height: $height;
    text-align: center;
    color: $color;
    cursor: pointer;
    font-size: px2rem(30px);
}

@mixin lineGradientBg($rotate,$from,$to) {
    background: linear-gradient($rotate, $from, $to);
}

@mixin arrows($arrow_color:#ccc, $arrow_size:1.0, $arrow_direction:45deg ) {
    position: absolute;
    padding-right: 15px;
    width: 100%;
    box-sizing: border-box;
    top: 20px;
    &::after {
        position: absolute;
        right: 10px;
        top: 50%;
        display: block;
        content: '';
        width: 10px;
        height: 10px;
        border-left: 2px solid $arrow_color;
        border-bottom: 2px solid $arrow_color;
        -webkit-transform: translateY(-50%) scale($arrow_size) rotateZ($arrow_direction);
        -moz-transform: translateY(-50%) scale($arrow_size) rotateZ($arrow_direction);
        -ms-transform: translateY(-50%) scale($arrow_size) rotateZ($arrow_direction)
    }
}

@mixin label($height: 44px, $o: 8px) {
    position: relative;
    display: inline-block;
    padding: 0 px2rem(20px);
    background-color: $darkBlue;
    border-radius: 4px;
    color: #fff;
    line-height: px2rem($height);
    &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: px2rem(10px);
        margin-top: - px2rem($o/2);
        width: px2rem($o);
        height: px2rem($o);
        border-radius: 50%;
        background-color: #fff;
    }
}

@mixin moreline-ellipsis($lineHeight: 20px, $lines: 2, $r: 255, $g: 255, $b: 255, $endColor: rgba(255,255,255,1)) {
    position: relative;
    line-height: px2rem($lineHeight);
    height: px2rem($lineHeight * $lines);
    overflow: hidden;
    &::after {
        content: "";
        font-weight: bold;
        position: absolute;
        background: linear-gradient(to right, rgba($r, $g, $b, 0), $endColor 90%);
        width: 40%;
        height: px2rem($lineHeight);
        bottom: 0;
        right: 0;
    }
}

@mixin line-ellipsis($substract:0) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100% - $substract;
}

@mixin disable-prefix-for-all() {
    $prefix-for-webkit: false !global;
    $prefix-for-mozilla: false !global;
    $prefix-for-microsoft: false !global;
    $prefix-for-opera: false !global;
    $prefix-for-spec: false !global;
}

@mixin keyframes($name) {
    $original-prefix-for-webkit: $prefix-for-webkit;
    $original-prefix-for-mozilla: $prefix-for-mozilla;
    $original-prefix-for-microsoft: $prefix-for-microsoft;
    $original-prefix-for-opera: $prefix-for-opera;
    $original-prefix-for-spec: $prefix-for-spec;

    @if $original-prefix-for-webkit {
        @include disable-prefix-for-all();
        $prefix-for-webkit: true !global;
        @-webkit-keyframes #{$name} {
            @content;
        }
    }

    @if $original-prefix-for-mozilla {
        @include disable-prefix-for-all();
        $prefix-for-mozilla: true !global;
        @-moz-keyframes #{$name} {
            @content;
        }
    }

    $prefix-for-webkit: $original-prefix-for-webkit !global;
    $prefix-for-mozilla: $original-prefix-for-mozilla !global;
    $prefix-for-microsoft: $original-prefix-for-microsoft !global;
    $prefix-for-opera: $original-prefix-for-opera !global;
    $prefix-for-spec: $original-prefix-for-spec !global;

    @if $original-prefix-for-spec {
        @keyframes #{$name} {
            @content;
        }
    }
}

//prefixer
@mixin prefixer($property, $value, $prefixes) {
    @each $prefix in $prefixes {

        @if $prefix == webkit and $prefix-for-webkit == true {
            -webkit-#{$property}: $value;
        } @else if $prefix == moz and $prefix-for-mozilla == true {
            -moz-#{$property}: $value;
        } @else if $prefix == ms and $prefix-for-microsoft == true {
            -ms-#{$property}: $value;
        } @else if $prefix == o and $prefix-for-opera == true {
            -o-#{$property}: $value;
        } @else if $prefix == spec and $prefix-for-spec == true {
            #{$property}: $value;
        } @else {
            @warn "Unrecognized prefix: #{$prefix}";
        }
    }
}

@mixin transform($property: none) {
    // none | <transform-function>
    @include prefixer(transform, $property, webkit moz ms o spec);
}

@mixin transform-origin($axes: 50%) {
    // x-axis - left | center | right  | length | %
    // y-axis - top  | center | bottom | length | %
    // z-axis -                          length
    @include prefixer(transform-origin, $axes, webkit moz ms o spec);
}

@mixin transform-style($style: flat) {
    @include prefixer(transform-style, $style, webkit moz ms o spec);
}

%overflow-touch {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.line-ellipsis {
    @include line-ellipsis();
}

%clearfix {
    zoom: 1;
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

.clearfix {
    zoom: 1;
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icon {
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
}
.icon-arrow{
    font-size: px2rem(36px);
    color: $text-color-9;
}

